<div class="view-content" ng-class="{ 'search-bar-bottom': vm.alternateSearchBarPosition }">
  <div class="header-panel" hm-tap="vm.selectedBookmarkId = null">
    <icon-button type="'settings'" size="1.3em" title="{{ vm.platformSvc.getI18nString(vm.Strings.Button.Settings) }}"
                 on-click="vm.utilitySvc.handleEvent(vm.switchToSettingsView)" tab-index="5"></icon-button>
    <icon-button type="'bookmark'" size="1.4em"
                 title="{{ vm.currentUrlBookmarked ? vm.platformSvc.getI18nString(vm.Strings.Button.EditBookmark) : vm.platformSvc.getI18nString(vm.Strings.Button.AddBookmark) }}"
                 ng-class="{ 'active': vm.currentUrlBookmarked }"
                 on-click="vm.utilitySvc.handleEvent(vm.switchToBookmarkView)"
                 ng-if="!vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName)" tab-index="4"></icon-button>
    <icon-button type="vm.displayFolderView ? 'align-justify' : 'align-left'" size="1.5em"
                 title="{{ vm.displayFolderView ? vm.platformSvc.getI18nString(vm.Strings.View.Search.SearchResults) : vm.platformSvc.getI18nString(vm.Strings.View.Search.BookmarkTree) }}"
                 on-click="vm.utilitySvc.handleEvent(vm.toggleBookmarkTreeView)" tab-index="3"></icon-button>
    <div class="search-form form-group icon-button-container">
      <input type="text" name="txtSearch" ng-model="vm.query" ng-model-options="{ debounce: globals.Debounce }"
             class="form-control" maxlength="200"
             placeholder="{{ vm.platformSvc.getI18nString(vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName) ? vm.Strings.View.Search.Placeholder : vm.Strings.View.Search.Placeholder) }}"
             ng-keydown="vm.utilitySvc.handleEvent(vm.searchBoxKeyDown, $event)" ng-trim="false" autocapitalize="off"
             autocomplete="off" autocorrect="off" spellcheck="false" tabindex="1" />
      <icon type="'search'" bold="true" class="search-icon"></icon>
      <div class="lookahead-container">
        <span class="measure" ng-bind-html="vm.queryMeasure"></span>
        <span class="lookahead" ng-show="vm.lookahead" ng-click="vm.utilitySvc.handleEvent(vm.selectLookahead)">{{
        vm.lookahead }} <icon type="'edit-3'" ng-if="vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName)">
          </icon></span>
      </div>
      <icon-button type="'x'" bold="true" class="btn-clear" ng-show="vm.query"
                   title="{{ vm.platformSvc.getI18nString(vm.Strings.View.Search.Clear) }}"
                   on-click="vm.utilitySvc.handleEvent(vm.clearSearch)" tab-index="2"></icon-button>
    </div>
  </div>
  <icon-button type="'bookmark'" fab="true" fixed="true" class="btn-add-bookmark"
               title="{{ vm.platformSvc.getI18nString(vm.Strings.Button.AddBookmark) }}"
               on-click="vm.utilitySvc.handleEvent(vm.addBookmark)" tab-index="-1"
               ng-if="vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName)"></icon-button>
  <div class="search-results-container pull-to-refresh" ng-if="!vm.displayFolderView" ng-show="vm.results">
    <h4 ng-show="!vm.query && vm.results.length === 0">
      {{ vm.platformSvc.getI18nString(vm.Strings.View.Search.NoBookmarks) }}
    </h4>
    <h4 ng-show="vm.query && vm.results.length === 0">
      {{ vm.platformSvc.getI18nString(vm.Strings.View.Search.NoResults) }}
    </h4>
    <div ng-show="vm.results.length > 0" infinite-scroll="vm.displayMoreSearchResults()"
         infinite-scroll-container="'.search-results-container'">
      <bookmark ng-repeat="result in vm.results | limitTo:vm.resultsDisplayed" ng-model="result"
                delete-bookmark="vm.deleteBookmark" edit-bookmark="vm.editBookmark"
                enable-edit-button="!vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName)"
                enable-select="vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName)"
                is-selected="vm.selectedBookmarkId ===  result.id" share-bookmark="vm.shareBookmark"
                hm-press="vm.utilitySvc.handleEvent(vm.selectBookmark, $event,  result.id)"
                ng-keydown="vm.utilitySvc.handleEvent(vm.searchResultsKeyDown, $event)"
                ng-class="{ 'animate': vm.selectedBookmarkId ===  result.id }" tabindex="{{ $index + 5 }}">
      </bookmark>
    </div>
  </div>
  <div class="bookmark-tree-container pull-to-refresh" ng-if="vm.displayFolderView">
    <bookmark-tree class="root" ng-model="vm.bookmarkTree" selected-bookmark="vm.selectedBookmarkId"
                   edit-bookmark="vm.editBookmark" select-bookmark="vm.selectBookmark" share-bookmark="vm.shareBookmark"
                   delete-bookmark="vm.deleteBookmark" ng-if="vm.bookmarkTree">
    </bookmark-tree>
    <h4 ng-if="vm.bookmarkTree.length === 0">
      {{ vm.platformSvc.getI18nString(vm.Strings.View.Search.NoBookmarks) }}
    </h4>
  </div>
</div>
